<template>
    
        <div id="mescroll0" class="mescroll" :class="'mescroll'+$route.query.select" ref="myself">
            <ul id="dataList0" class="data-list">
                <li class="dynamic-one" v-for="(item,key) in dataList" :key="key" :id="'li'+item.id">
                    <p class="dyn-title">{{item.ccontent}}</p>
                    <p class="dyn-imgbox">
                        <img v-for="(img,index) in item.attachs"
                            v-gallery:group1
                            :key="index" 
                            :src="baseUrl+img.cpath+img.cfilename" >
                    </p>
                    <p class="dyn-time"><span>{{timeBetween(item.ddate)}}</span></p>
                    <div class="clear"></div>
                    <div class="good-count">
                        <label @click="showcommentpopup(item)" class="left-count" :data-id="item.id">
                            <i class="iconfont icon-pinglun"></i><span>{{item.iaccount ?item.iaccount :0 }}</span>
                        </label>
                        
                        <label class="left-good" :data-id="item.id" data-uid="null" @click="togZan(item.id,item.atid,item)">
                            <i class="iconfont icon-dianzan zaning" :class="{zaned:item.atid}"></i> <span>{{item.iatcount?item.iatcount :0}}</span>
                        </label>
                        <div class="clear"></div>
                    </div>
                    <div v-if="item.comments.length>0" class="contentList" :id="'artice'+item.id">
                        <!-- 评论 -->
                        <div v-for="(comment,cindex) in item.comments" 
                        :key="cindex"
                        v-if="!comment.ireplyuid" class="reply-list-info" style="display:block" :data-iarticleid="item.id" :data-id="comment.id" :data-name="comment.crealname ? comment.crealname : comment.cuserid">
                            <span @click=" showcommentpopup(item,comment)" class="uName rName">{{comment.crealname ? decodeURIComponent(comment.crealname) : comment.cuserid}}</span> : {{comment.content}}
                        </div>
                        <!-- 回复 -->
                        <div v-else class="reply-list-info" style="display:block" :data-iarticleid="item.id" :data-id="comment.id" :data-name="comment.crealname ? comment.crealname : comment.creplyuser">
                            <span @click=" showcommentpopup(item,comment)" class="uName rName">{{comment.crealname ? decodeURIComponent(comment.crealname) : comment.cuserid}}</span>回复   <span class="uName">{{comment.creplyrealname ? decodeURIComponent(comment.creplyrealname) : comment.creplyuser}}</span>: {{comment.content}}
                        </div>

                    </div>
                </li>
                <div v-if="hasdata" style="height:30px;" class="more" @click="loadmore">点击加载更多...</div>
                <div v-if="nodata" style="height:30px;" class="more">没有数据了哦！</div>
            </ul>
            <!-- 评论框 -->
            <el-collapse-transition>
                <div class="sendBox" v-show="mainSend">
                    <textarea placeholder="说点什么吧..." v-model="content" class="textReply" name="" id=""></textarea>
                    <div class="csboth"><span @click="cancel">取消</span><span @click="sendcomment">发送</span></div>
                </div>
            </el-collapse-transition>
            <!-- 评论框结束 -->
        </div>
    
</template>

<script>
import {baseUrl} from '@/config/env.js'
import fetch from '@/config/fetch.js'//这里直接调用封装好的fetch
let curId = '';
export default {
    data () {
      return {
        curId:curId?curId:this.$route.query.id,
        iszan:false,
        curItem:'',//当前动态
        curComment:'',//当前评论
        content:'',
        mainSend:false,
        hasdata:false,
        nodata:false,
        cardIds:[],
        pageNo:1,
        dataList:[],
        baseUrl:baseUrl
      };
    },
    beforeRouteEnter(to,from,next){
        // if(from.name == )
        let curId = from.query.id;
        // console.log(curId)
        next()
    },
    methods:{
        getMyData() {
            let self = this
            let loading = this.$loading({
                                            lock: false,
                                            spinner: 'el-icon-loading',
                                            background: 'rgba(0, 0, 0, 0)',
                                            text:'加载中...',
                                            customClass:'changeColor',
                                            target:self.$refs.myself
                                        });

            let id = self.$route.query.id;
            let sendData={}
            sendData.pageNo=self.pageNo;
            sendData.pageSize=10;
            sendData.itype = 1
            sendData.ccardid=id;
            let responseData = fetch('/article/listArticle',sendData,'POST');
            responseData.then((res)=>{
                if(res.result == 1){
                    let items = res.data.list;
                    if(items.length == 0 || items.length<10){
                        self.nodata = true;
                        self.hasdata = false;
                    }else{
                        self.hasdata = true;
                        self.nodata = false;
                    }
                    items.forEach( (item,key) => {
                        if(self.cardIds.indexOf(item.id)<0){//去重
                            self.cardIds.push(item.id);
                            self.dataList.push(item)
                        }
                    })
                    self.pageNo++;
                    self.$nextTick(()=>{
                        loading.close();
                    })
                }else if(res.result == 111){
                    self.nodata = true;
                    self.hasdata = false;
                    loading.close();
                }else{
                    self.$message({
                        duration: 2000,
                        message: res.msg,
                        type: 'error'
                    })
                    loading.close();
                }
            })
           
        },
        loadmore(){
            this.getMyData();
        },
        showcommentpopup(item,comment){
            // console.log(comment)
            let self = this
            self.curItem = item;
            self.curComment = comment;
            self.mainSend = true;
        },
        cancel(){
            this.mainSend = false;
        },
        sendcomment(){//发送评论和回复
            let self = this;
            if(self.content == ''){
                alert('请输入内容！')
                return false;
            }
            if(self.curComment && self.curComment.id){
                var ireplyid = self.curComment.id
            }else{
                var ireplyid = ''
            }
            let sendcommentjson={iarticleid:self.curItem.id,ireplyid:ireplyid,content:self.content}
            let responseData = fetch('/comment/saveComment',sendcommentjson,'POST')
            responseData.then((res)=>{
                if(res.result==1){
                    self.$message({
                        duration: 2000,
                        message: '回复成功',
                        type: 'success'
                    })               
                    self.curItem.iaccount++;
                    self.mainSend = false;
                    self.curItem.comments.push(res.data)
                }else{
                    self.$message({
                        duration: 2000,
                        message: res.msg,
                        type: 'error'
                    })               
                }
            })
        },
        async togZan(artid,zanid,item){//
            let self = this;
            if(zanid!=null){
                var url = '/thumbup/cancelThumbUp'
                var sendData = {
                    id:zanid
                }
            }else{
                var url = '/thumbup/saveThumbUp'
                var sendData = {
                    iarticleid : artid
                }
            }

            let responseData = fetch(url,sendData,'POST')
            await responseData.then((res)=>{
                if(res.result==1){
                    self.$message({
                        duration: 2000,
                        message: res.msg,
                        type: 'success'
                    })         
                    self.iszan=!self.iszan 
                    // console.log(self.iszan)
                    if(zanid!=null){
                        item.iatcount--
                        item.atid = null
                    }else{
                        item.iatcount++
                        item.atid = res.data.id
                    }              
                }else{
                    self.$message({
                        duration: 2000,
                        message: res.msg,
                        type: 'error'
                    })              
                }
            })

        },
    },
    components:{
       
    },
    mounted(){
        let self = this;
        self.getMyData();
    },
    activated(){
        if(this.curId != this.$route.query.id){
            let self = this;
            self.iszan=false;
            self.curItem='';//当前动态
            self.curComment='';//当前评论
            self.content='';
            self.mainSend=false;
            self.hasdata=false;
            self.nodata=false;
            self.cardIds=[];
            self.pageNo=1;
            self.dataList=[];

            self.getMyData();
        }
    }
}
</script>
<style>
.zaned{
        color:#00AA76;
    }
</style>

<style scoped>
    .sendBox{
        width: 100%;
        margin: 0 auto;
        position: fixed;
        bottom: 3rem;
        right: 0;
        left: 0;
        padding: 1rem;
        z-index: 1000;
        background: rgba(0,0,0,.6);
    }
    .csboth{
        color: #ffffff;
    }
	.mescroll{ position: static;bottom: 0;}
    .myself{width:100%;height:auto;margin-top:0rem;position: relative;}
    .mescroll{ position: static;bottom: 0;height:auto; padding-bottom: 3.4rem; background: #fff;}
    .myself{width:100%;height:auto;margin-top:0rem;position: relative;}
    .mescroll-upwarp{ padding-top: 30px;}
    .reply-list-info { display: block;padding-top: 0.6rem; width: 100%; padding-left: .5rem;}
    .reply-list-info span.uName {display: inline-block;color: #333;font-·ght: bold;}
    .good-count label.left-good i.zanok {color: rgb(39, 144, 166)}
    .comment-popup{color: #666;line-height: 3.6rem;height: 3.6rem;background: #666;width: 100%;}
    #reply-input{border-radius: 5px;outline: 0;width: 70%;height: 2.35rem;margin-left: 2%;border: 0;margin-top: .65rem;padding-left: 10px;float: left;font-size: .8rem;}
    #reply-submit{background: #1ACCAC;width: 18%;float: right;height: 2.35rem;margin-right: 2%;text-align: center;margin-top: 10px;line-height: 2.35rem;border-radius: 5px;color: #fff;}
    .word-one{display:block;width:96%;box-sizing:border-box;margin:auto;height:auto;background:#fff;margin-top:1rem; margin: auto; border-bottom: solid 0.05rem #eee; padding-top: 1rem; padding-bottom: 1rem;}
    .word-one .cardword-main{max-width:70vh;overflow-x:hidden}
    .word-one .cardword-title{display:block;font-size:18px}
    .word-one .cardword-other{display:block;font-size:12px}
    .word-one .cardword-date{font-size:.8rem;background:#f9f9f9;border-radius:100px;padding-left:.5rem;padding-right:.5rem;margin-top:1.3rem}
    .more{ font-size: .8rem; text-align: center; color: #ccc; line-height: 2rem;}
    .dynamic-one{ display: inline-block;  width: 100%; height: auto; overflow: hidden; background: #fff; font-size: .9rem; padding-top: .2rem;border-bottom: solid .01rem #ddd; margin-top: 1rem; padding-bottom: 1rem;}
    .last-one{margin-bottom: 0}
    .dynamic-one p.dyn-time{ display: inline-block; width: auto; margin-left: 2%; font-size: .7rem; color: #999; padding-top: 1rem;}
    .dynamic-one p.dyn-time i{ font-size: .7rem; padding-right: .2rem;}
    .dynamic-one p.dyn-imgbox img{ display: inline-block; width: 23.5%; height: 4.5rem; float: left; margin:1.5% 1.5% 0 0; margin-top: .5rem;}
    .dynamic-one p.dyn-title{ width: 95%; margin: auto; height: auto; overflow: hidden; font-size: 1rem;}
    .dynamic-one p.dyn-imgbox{ width: 96%; margin: auto; height: auto; overflow: hidden;}
    .good-count{ width: 100%; margin: auto; height: auto;margin-top: 1rem; color: #333; overflow: hidden;}
    .good-count label.left-count{ width: auto; float: left; text-align: center; margin-left: 2%;}
    .good-count label.left-count a#turnTodynamic{ display: inline-block; width: auto; list-style: none;}
    .good-count label.left-good{ width: auto; float: left; text-align: center; margin-left: 2%;}
    .good-count label.left-count i{ color: #ddd;font-size: 1.1rem;}
    .good-count label.left-good i{ font-size: 1.1rem;}

    .cardcode-popup{width: 100%;}
    
</style>
